<template>
  <TableQuery
    :query="tableQuery"
    :loadTableList="loadTableList"
    :clearQuery="clearQuery"
    :queryFormHeaders="queryFormHeaders"
    :removeQueryField="removeQueryField"
  >
<!--    <template #beginTime>-->
<!--      <el-date-picker-->
<!--        v-model="createTimeQuery"-->
<!--        type="datetimerange"-->
<!--        unlink-panels-->
<!--        format="YYYY-MM-DD"-->
<!--        value-format="YYYY-MM-DD"-->
<!--        start-placeholder="开始时间"-->
<!--        end-placeholder="截止时间"-->
<!--        @change="changeCreateTimeQuery"-->
<!--      />-->
<!--    </template>-->
  </TableQuery>
</template>

<script lang="ts" setup>
import TableQuery from '@/components/base/table/TableQuery.vue';
import {
  computed, defineProps, withDefaults, watch, ref,
} from 'vue';

// 接收父组件参数
interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  query: Record<string, any>, // 查询表单对象
  loadTableList: () => void, // 重新加载表格
  clearQuery: () => void // 清空查询条件
  removeQueryField: (key: string) => void // 移除查询条件中的某个元素
}

const props = withDefaults(defineProps<Props>(), {
  query: () => ({}), // 返回空对象
});
// 定义查询表单对象，避免直接使用props导致eslint报错
const tableQuery = computed(() => props.query);
// 定义查询表单的内容
const queryFormHeaders = [ // 查询表单
  {
    prop: 'address',
    label: '住所',
  },
  {
    prop: 'equipment',
    label: '设备设施',
    show: false,
  },
  {
    prop: 'remark',
    label: '文字描述',
    show: false,
  },
  // {
  //   prop: 'beginTime',
  //   label: '活动时间',
  //   type: 'custom',
  //   show: false,
  // },
];

const createTimeQuery = ref('');// 定义注册日期范围的变量，按照日历插件特点，该对象应该是数组
// const departmentId=ref("");
const changeCreateTimeQuery = (value: Array<string> | null) => { // 当注册日期改变时触发（点击日历确定按钮后）。当手动清空日期框时，value值为null
  if (value !== null) {
    if (value.length === 2) {
      const createTimeQueryOfBegin = value[0];
      tableQuery.value.beginTime = createTimeQueryOfBegin;// 开始日期
      const createTimeQueryOfEnd = value[1];
      tableQuery.value.endTime = createTimeQueryOfEnd;// 截止日期
      const issuedDateQueryOfBegin = value[2];
      tableQuery.value.issuedDate = issuedDateQueryOfBegin;// 截止日期
    }
  } else { // 当日期被手动清空时
    delete tableQuery.value.createTimeQueryOfBegin;// 移除属性，避免清空后查询时还会带上该参数
    delete tableQuery.value.createTimeQueryOfEnd;// 移除属性，避免清空后查询时还会带上该参数
    delete tableQuery.value.issuedDateQueryOfBegin;// 移除属性，避免清空后查询时还会带上该参数
  }
};
// 因为根据日历插件的特性，createTimeQueryOfBegin和createTimeQueryOfEnd必须同时存在，因此只要监听一个就可以。
// 注意，监听对象中的属性，只能用这种watch的写法。不能使用写法：watch(props.query.createTimeQueryOfBegin,(newVal:string,oldVal:string)=>{});
watch(() => tableQuery.value.createTimeQueryOfBegin, (newVal: string, oldVal: string) => {
  if ((typeof newVal === 'undefined' || newVal === '') && oldVal !== '') { // 如果当前值不存在并且上一个值不为空，则说明日期被清空了
    createTimeQuery.value = '';
  }
});
</script>

<style scoped>

</style>
